<style lang="less">
.goldVip-wrapper {
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #dcdee2;
  line-height: 30px;
  margin: 0;
  margin-bottom: 10px;
  padding: 0 15px;
  font-size: 14px;
  color: #515a6e;
  width: 200px;
  .vip-name {
    font-size: 18px;
    padding-top: 10px;
  }
  .validDay {
    line-height: 24px;
    padding: 5px 0;
    .validDay-text {
      font-size: 16px;
      font-weight: bold;
      color: #f90;

      vertical-align: middle;
    }
  }
  .price {
    line-height: 24px;
    padding: 5px 0;
    .price-text {
      font-size: 16px;
      font-weight: bold;
      color: #ed4014;

      vertical-align: middle;
    }
  }
}

.goldVip-checked {
  border-color: #57a3f3;
  color: #57a3f3;
  position: relative;
  background: url(./../../../images/choosen.png) no-repeat 150px 0;
  background-size:50px 50px;
}

.wepay-logo {
  width: 120px;
  margin: 0 auto;
}
.wepay-instruction {
  width: 150px;
}
</style>

<template>
  <div>
    <p style="color:#f60;text-align:center;font-size:24px;line-height:30px;padding-bottom:10px;">
      <Icon type="md-cash"/>
      <span>支付</span>
    </p>
    <div
      v-for="(item,index) in goldVipList"
      :key="index"
      class="goldVip-wrapper"
      :class="vipId==item.Id?'goldVip-checked':''"
      @click="changeVipId(item.Id)"
    >
      <div class="vip-name">{{item.Name}}</div>
      <div class="validDay">
        有效期:<span class="validDay-text">{{item.ValidDay}}</span>天
      </div>
      <div class="price">
        价格:￥<span class="price-text">{{item.Price}}</span>
      </div>
    </div>

    <Button type="warning" @click="confirmAddGoldVip">确认套餐</Button>
    <div style="width:100%; text-align: center;margin-top:20px;" v-if="WxQRCode">
      <img src="./../../../images/WePayLogo.png" class="wepay-logo" alt>
      <div style="width:100%; text-align: center;">
        <div style="margin:20px;">
          <img :src="WxQRCode">
        </div>
        <div>
          <img src="./../../../images/WePayInstruction.png" class="wepay-instruction" alt>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { baseURL } from "@/config";
import { mapMutations, mapActions } from "vuex";
import { getGoldVipInfo, addGoldVip, userInfo } from "@/api/user";
export default {
  props: {
    subjectName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      goldVipList: [],
      vipId: "",
      WxQRCode: "", //微信支付二维码
      conn: null //signal 连接
    };
  },
  mounted() {
    this.getGoldVipInfo();
  },
  methods: {
    async getGoldVipInfo() {
      let res = await getGoldVipInfo();
      if (res.status == 0) {
        this.goldVipList = res.data;
        this.goldVipChoose = res.data[0].Name;
        console.log(this.goldVipList);
        this.vipId = res.data[0].Id;
      }
    },
    changeVipId(Id) {
      this.vipId = Id
    },
    async confirmAddGoldVip() {
      let res = await addGoldVip({ vipId: this.vipId });
      console.log(res);
      if (res.status == 0) {
        this.WxQRCode = "data:image/jpeg;base64," + res.data.qr_code;
        let orderNum = res.data.order_num;
        var me = this;
        this.conn = $.connection(baseURL + "/Signalr/PayConnection");
        console.log(baseURL + "/Signalr/PayConnection");
        this.conn.start().done(function(data) {
          console.log("连接成功，connectionId 为： " + data.id + "\r\n");
          me.conn.send(orderNum);
        });

        this.conn.received(function(data) {
          var obj = JSON.parse(data);
          if (obj.success) {
            me.getUserInfo();
          }
          console.log("收到数据： " + data + "\r\n");
        });
      }
    },
    async getUserInfo() {
      let res = await userInfo();
      if (res.status === 0) {
        this.$store.commit("updateUserInfo", res.data);
        this.$emit("routeToGoldVip");
      }
    }
  }
};
</script>
